<template>
  <page-content :left="false">
    <space class="my-1">
      <option-form 
        :detailMode="true"
        :pass_put="pass_put"
        :pass_restore="pass_restore"
        :pass_delete="pass_delete"
        :pass_force_delete="pass_force_delete"
        :metaid="this.$route.meta.id"
        :selectedCount="1"
        :selectedRowKeys="[this.$route.params.id]"
      />
    </space>
    <a-descriptions bordered>
      <a-descriptions-item label="ID">
        {{data.id}}
      </a-descriptions-item>
      <a-descriptions-item v-if="data.category" label="分类">
        {{data.category.name}}
      </a-descriptions-item>
      <a-descriptions-item label="类型">
        {{data.type_text}}
      </a-descriptions-item>
      <a-descriptions-item label="名称">
        {{data.name}}
      </a-descriptions-item>
      <a-descriptions-item label="标识">
        {{data.slug}}
      </a-descriptions-item>
      <a-descriptions-item label="描述">
        {{data.desc}}
      </a-descriptions-item>
      <a-descriptions-item label="选项">
        <!-- 单选多选 -->
        <span v-if="(data.type==this.CONFIG_TYPES.MULTIPLE || data.type==this.CONFIG_TYPES.SINGLE) && data.options" class="ml-1">
          <a-tooltip
            v-if="data.options"
            placement="topLeft"
          >
            <span v-if="data.type==this.CONFIG_TYPES.SINGLE"  slot="title">
              选项来源：
                <template v-if="data.options.sample == '2'">
                  从数据库导入
                </template>
                <template v-else-if="data.options.sample == '3'">
                  从配置项导入
                </template>
                <template v-else>
                  手动输入
                </template>
                <br/>
              选项设置：{{ data.options.options }}<br/>
              选择形式：
                <template v-if="data.options.type == 'single_select'">
                  单选下拉
                </template>
                <template v-else>
                  单选框
                </template>
            </span>
            <span v-else-if="data.type==this.CONFIG_TYPES.MULTIPLE" slot="title">
              选项来源：
                <template v-if="data.options.sample == '2'">
                  从数据库导入
                </template>
                <template v-else-if="data.options.sample == '3'">
                  从配置项导入
                </template>
                <template v-else>
                  手动输入
                </template>
                <br/>
              选项设置：{{ data.options.options }}<br/>
              选择形式：
                <template v-if="data.options.type == 'multiple_select'">
                  多选下拉
                </template>
                <template v-else-if="data.options.type == 'transfer'">
                  穿梭框
                </template>
                <template v-else>
                  多选框
                </template>
            </span>
            <a-tag color="blue" >{{ data.type }}</a-tag>
          </a-tooltip>
        </span>

        <!-- 树状下拉选择、级联选择 -->
        <span v-else-if="(data.type==this.CONFIG_TYPES.CASCADER || data.type==this.CONFIG_TYPES.SELECT_TREE) && data.options" class="ml-1">
          <a-tooltip
            v-if="data.options"
            placement="topLeft"
          >
            <span slot="title">
              选项来源：
                <template v-if="data.options.sample == '1'">
                  手动输入
                </template>
                <template v-else-if="data.options.sample == '2'">
                  从数据库导入
                </template>
                <template v-else-if="data.options.sample == '3'">
                  从配置项导入
                </template>
                <template v-else-if="data.options.sample == '4'">
                  JSON导入
                </template>
                <br/>
              选项设置：{{ data.options.options }}
            </span>
            <a-tag color="blue" >{{ data.type }}</a-tag>
          </a-tooltip>
        </span>

        <!-- 文件上传 -->
        <span v-else-if="data.type==this.CONFIG_TYPES.FILE && data.options" class="ml-1">
          <a-tooltip
            v-if="data.options"
            placement="topLeft"
          >
            <span slot="title">
              最大上传数：{{data.options.max}}<br/>
              文件类型：{{data.options.ext ? data.options.ext : '不限'}}
            </span>
            <a-tag color="blue" >{{ data.type }}</a-tag>
          </a-tooltip>
        </span>
        <span v-else class="ml-1">
          <a-tag>{{ data.type }}</a-tag>
        </span>
      </a-descriptions-item>
      <a-descriptions-item label="默认值">
        <div v-if="data.type === CONFIG_TYPES.FILE" style="display: flex; overflow-x: auto">
          <file-preview
            v-for="(item, index) of arrayWrap(data.value)"
            v-if="index<3" 
            :key="index"
            :file="item"
          />
        </div>

        <div v-else-if="data.type==CONFIG_TYPES.MULTIPLE">
          <span
            v-for="(item,index) of data.value" 
            v-if="index<3" 
            :key="item"
          >
            <template v-if="index > 0">
              <a-divider v-if="index < data.value.length+1" type="vertical" />
            </template>
            {{ item }}
          </span>
          <span 
            v-if="data.value.length>3" 
            >...
          </span>
        </div>

        <div v-else-if="data.type=='editor'">
          <doc-preview
            :title="data.label"
            :content="data.value"
            :type="data.type"
          />
        </div>

        <div v-else-if="data.type=='textarea'">
          <doc-preview
            :title="data.label"
            :content="data.value"
            :type="data.type"
          />
        </div>

        <div v-else-if="data.type=='dynamic_input'">
          <doc-preview
            :title="data.label"
            :content="data.value"
            :type="data.type"
          />
        </div>

        <div v-else-if="data.type=='dynamic_textarea'">
          <doc-preview
            :title="data.label"
            :content="data.value"
            :type="data.type"
          />
        </div>

        <div v-else>
          {{ data.value }}
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="验证规则">
        {{data.validation_rules}}
      </a-descriptions-item>
      <a-descriptions-item label="表单是否禁用">
        {{data.form_disabled}}
      </a-descriptions-item>
      <a-descriptions-item label="排序">
        {{data.order}}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{data.created_at}}
      </a-descriptions-item>
      <a-descriptions-item label="更新时间">
        {{data.updated_at}}
      </a-descriptions-item>
    </a-descriptions>
  </page-content>
</template>

<script>
import { mapConstants } from '@/libs/constants'
import { arrayWrap, can } from '@/libs/utils'
import FilePreview from '@c/FilePreview'
import DocPreview from '@c/DocPreview'
import PageContent from '@c/PageContent'
import OptionForm from '@c/OptionForm'
import Space from '@c/Space'
import {
  showConfig,
} from '@/api/configs'
import {
  changeDetailDefault,
} from '@/libs/utils'

export default {
  name: 'Detail',
  components: {
    FilePreview,
    DocPreview,
    PageContent,
    OptionForm,
    Space,
  },
  data() {
    return {
      data: {},
    }
  },
  computed: {
    ...mapConstants(['CONFIG_TYPES']),
    pass_put() {
      return !this.data.deleted_at && can('pass-put-configs')
    },
    pass_delete() {
      return !this.data.deleted_at && can('pass-delete-configs')
    },
    pass_restore() {
      return this.data.deleted_at && can('pass-restore')
    },
    pass_force_delete() {
      return this.data.deleted_at && can('pass-force-delete')
    },
  },
  methods: {
    arrayWrap,
    async showConfig(id) {
      const { data } = await showConfig(id)
      this.data = changeDetailDefault(data)
    },
    formatContent(content) {
      if (content !== null && content !== '') {
        return content.replace(/\n/g, "<br/>");
      }
    },
  },
  watch: {
    $route: {
      async handler() {
        await this.showConfig(this.$route.params.id)
      },
      immediate: true,
    },
  },
}
</script>